<template>
  <div class="select-route-panel">
    <!-- <div class="panel-header">
      <h3 class="panel-title">选择航线</h3>
    </div> -->
    <div class="panel-content">
      <!-- 搜索模块 -->
      <div class="search-module">
        <el-input
          v-model="searchValue"
          placeholder="请输入搜索内容"
          class="custom-search-input"
        >
          <template #suffix>
            <i class="custom-search-icon"></i>
          </template>
        </el-input>
      </div>
      <!-- 航线列表 -->
      <div class="route-list-container">
        <div 
          v-for="item in routeList" 
          :key="item.id" 
          class="route-list-item"
          :class="{ selected: selectedRoute?.id === item.id }"
          @click="selectRoute(item)"
        >
          <div class="route-name">{{ item.name }}</div>
        </div>
      </div>
    </div>

    <!-- 收起按钮 -->
    <div class="fold-btn" @click="toggleCollapse">
      <img class="fold-btn-bg" :src="foldBg" alt="左收起背景" />
      <img class="fold-btn-to-left-icon" :class="{ rotated: isCollapsed }" :src="foldIconToLeft" alt="向左收起" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 定义 emits
const emit = defineEmits(['hide', 'select-route'])

// 收起icon
import foldBg from '@/assets/icons/icon_fold_left_bg.png' // 收起按钮的背景
import foldIconToLeft from '@/assets/icons/icon_fold_to_left_arrow.png' // 向左icon

const searchValue = ref(""); // 搜索内容

// 航线列表数据
const routeList = ref([
  {
    id: 1,
    name: '巡检航线 001'
  },
  {
    id: 2,
    name: '测绘航线 A区'
  },
  {
    id: 3,
    name: '应急响应航线'
  },
  {
    id: 4,
    name: '日常巡航路线'
  },
  {
    id: 5,
    name: '边界巡查航线'
  }
])

// 选中的航线
const selectedRoute = ref(null)

// 选择航线
const selectRoute = (route) => {
  // 如果点击已选中的航线，则取消选择
  if (selectedRoute.value?.id === route.id) {
    selectedRoute.value = null
    console.log('取消选择航线')
  } else {
    selectedRoute.value = route
    console.log('选择航线:', route.name)
    // 发送选中的航线数据
    emit('select-route', route)
    // 延迟关闭面板
    setTimeout(() => {
      emit('hide')
    }, 300)
  }
}

// 折叠状态
const isCollapsed = ref(false)

// 切换折叠状态
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
  // 如果折叠，通知父组件隐藏
  if (isCollapsed.value) {
    setTimeout(() => {
      emit('hide')
    }, 300) // 等待动画完成
  }
}
</script>

<style lang="scss" scoped>
// 引入 Element Plus 组件样式覆盖
@import "@/style/element-overrides.scss";

.select-route-panel {
  position: relative;
  width: 404px;
  height: 903px;
  background: url("@/assets/images/add_task_search_panel_bg.png") no-repeat
    center center;
  background-size: 100% 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  
  .panel-header {
    width: 100%;
    height: 38px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;

    .panel-title {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 18px;
      vertical-align: top;
      background: linear-gradient(
        180deg,
        rgba(238, 238, 238, 1) 0%,
        rgba(238, 238, 238, 1) 40%,
        rgba(59, 135, 202, 1) 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));
      position: relative;
      bottom: -2px;
    }
  }
  
  .panel-content {
    flex: 1;
    width: 100%;
    max-height: 865px;
    overflow-y: auto;
    padding: 30px 16px;
    box-sizing: border-box;
    transition: opacity 0.3s ease;

    // 滚动条样式
    &::-webkit-scrollbar {
      width: 5px;
    }
    
    &::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 2.5px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2.5px;
      transition: all 0.3s;
      
      &:hover {
        background: rgba(255, 255, 255, 0.5);
      }
    }

    // Firefox 滚动条样式
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;

    // 搜索模块
    .search-module {
      width: 100%;
      margin-bottom: 16px;
    }
    
    // 航线列表容器
    .route-list-container {
      width: 100%;
      
      .route-list-item {
        width: 100%;
        background: rgba(2, 92, 109, 0.3);
        backdrop-filter: blur(6px);
        padding: 16px;
        box-sizing: border-box;
        cursor: pointer;
        transition: all 0.3s ease;
        
        & + .route-list-item {
          margin-top: 8px;
        }
        
        &:hover {
          background: rgba(2, 92, 109, 0.5);
        }
        
        &.selected {
          box-shadow: inset 0px 0px 6px 1px rgba(0, 255, 244, 0.7);
        }
        
        .route-name {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 14px;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }

  // 收起按钮
  .fold-btn {
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    
    .fold-btn-bg {
      width: 30px;
      height: 82px;
    }
    
    .fold-btn-to-left-icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 14px;
      height: 14px;
      transition: transform 0.3s ease;
      
      &.rotated {
        transform: translate(-50%, -50%) rotate(180deg);
      }
    }
  }
}

// 自定义滚动条
.route-list {
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.3);
    border-radius: 3px;
    
    &:hover {
      background: rgba(0, 255, 255, 0.5);
    }
  }
}
</style>